<template>
	<view class="search_inp_box flex align-center" :class="[bg, border]">
		<image class="search_img" src="../../static/img/search.png" mode="aspectFit"></image>
		<input class="search_inp flex1" type="text" :placeholder="placeholder" v-model="val" />
		<image class="search_clear" src="../../static/img/search_clear.png" mode="aspectFit" v-if="show" @tap="clear()"></image>
	</view>
</template>

<script>
	export default {
		props: {
			val: {
				type: String,
				default: ""
			},
			placeholder: {
				type: String,
				default: "搜索您想要的"
			},
			bg: {
				type: String,
				default: "bg-f7f7f7"
			},
			border: {
				type: String,
				default: "solid"
			},
		},
		data(){
			return{
				show:false
			}
		},
        mounted() {
          /* if(uni.report && this.title !== '') {
              uni.report('title', this.title)
          } */
        },
		watch:{
			val(newVal, oldVal){
				if(newVal){
					this.show = true;
					setTimeout(()=>{
						this.$emit("search", newVal);
					}, 500)
				}
			}
		},
		methods: {
			clear(){
				this.val = ""
			}
		}
	};
</script>

<style lang="scss" scoped>
	.search_inp_box{
		width: 100%;
		height: 60rpx;
		border-radius: 60rpx;
		padding: 0 20rpx;
	}
	.search_img{
		width: 28rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}
	.search_inp{
		font-size: 28rpx;
		color:#333;
	}
	.search_clear{
		width: 28rpx;
		height: 28rpx;
	}
</style>
